<template>
	<uni-card title="查询条件" margin="1" padding="0">
		<view>
			<view class="mycss-flex-start-clumncenter-nowarp white-background-color">
				<view>
					<uni-data-checkbox mode="button" v-model="radio1" :localdata="notepadData.status"
						@change="doStatusChange"></uni-data-checkbox>
				</view>
			</view>
			<view>
				<uni-datetime-picker v-model="range" type="daterange" @change="dateChange" @clear="dateClear"
					clearIcon />
			</view>
		</view>
		<view>
			<view>
				<uni-easyinput v-model="searchContent" placeholder="请输入查询内容" suffixIcon="search"
					@iconClick="doSearch" />
			</view>
			<u-line></u-line>
			<view class="white-background-color uni-pa-3">
				<uni-data-checkbox mode="button" v-model="ww" :localdata="notepadData.types"></uni-data-checkbox>
			</view>
		</view>
	</uni-card>
	<uni-card margin="1" padding="0">
		<view class="mycss-flex-around-clumncenter-nowarp white-background-color uni-pa-3">
			<view>
				<BiaofunDatetimePicker ref="yearRef" fields="year" :placeholder="tsYear" :defaultValue="startYear"
					@change="changeYear"></BiaofunDatetimePicker>
			</view>
			<view>
				<BiaofunDatetimePicker ref="monthRef" fields="month" :placeholder="tsMonth" :defaultValue="startMonth"
					@change="changeMonth"></BiaofunDatetimePicker>
			</view>
			<view>
				<u-button type="primary" size="mini" @click="openNote">添加</u-button>
			</view>
			<view>
				<u-button type="primary" size="mini" @click="allSchedu">所有日程</u-button>
			</view>
			<view>
				<u-button type="primary" size="mini" @click="reset">重置</u-button>
			</view>
		</view>
		<view class="uni-pa-3 white-background-color">
			<u-button :type="showCls==true?'primary':'warning'" :customStyle="{padding:'0px'}" size="mini"
				@click="showTimeCols()">{{showCls==true?'隐藏日历':'显示日历'}}</u-button>
		</view>
		<view v-if="showCls">
			<!-- 插入模式 -->
			<uni-calendar class="uni-calendar--hook" :selected="selected" :showMonth="false" @change="calendarChange" />
		</view>
		<view>
			<uni-section title="备忘记文本" type="line" padding>
				<uni-grid :column="ww" :highlight="true">
					<uni-grid-item v-for="(item, index) in tableData" :index="index" :key="index">
						<view class="mygrid">
							<view class="myautoline">
								{{item.content}}
							</view>
							<scroll-view class="mycss-scroll-view-H mybottom" scroll-x="true">
								<view class="mycss-flex-start-clumncenter-nowarp">
									<view v-if="item.importantFlag==1" class="mycss-flex-start"
										style="font-size: 20rpx">
										<view :style="{'color':'#e45656'}">【重要】</view>
									</view>
									<view v-if="item.remindDate" class="mycss-flex-start" style="font-size: 20rpx">
										<u-icon name="bell" color="#e45656"></u-icon>
										<view :style="{'color':'#e45656'}">{{item.remindDate}}</view>
									</view>
									<view class="mycss-flex-start" style="font-size: 20rpx">
										<text>
											[{{item.createTime}}]
										</text>
									</view>
								</view>
								<view class="mycss-flex-start-clumncenter-nowarp">
									<u-button type="primary" size="mini" class="uni-ml-3"
										@click="detail(item)">详情</u-button>
									<u-button type="primary" size="mini" class="uni-ml-3"
										@click="openProcess(item)">工序</u-button>
									<u-button type="primary" size="mini" class="uni-ml-3"
										@click="detail(item)">编辑</u-button>
									<u-button type="primary" size="mini" class="uni-ml-3"
										@click="del(item)">删除</u-button>
									<u-button type="primary" size="mini" class="uni-ml-3"
										@click="complete(item)">完成</u-button>
									<u-button type="primary" size="mini" class="uni-ml-3"
										@click="alertSet(item)">到期提醒</u-button>
								</view>
							</scroll-view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
	</uni-card>
	<view>
		<u-popup ref="mypopup" mode="center" :show="showDialog" :safeAreaInsetBottom="false">
			<view class="u-popup-slot">
				<view class="mycss-flex-end">
					<u-icon class="uni-ml-5" name="close" size="25" color="#f56c6c"
						@click="showDialog = !showDialog"></u-icon>
				</view>
				<uni-card margin="1" padding="0">
					<view class="mycss-flex-start-clumncenter-nowarp">
						<text>
							选择日程时间：
						</text>
						<BiaofunDatetimePicker v-model="scheDay" ref="scheRef" fields="day" :defaultValue="startSche"
							@change="changeSche"></BiaofunDatetimePicker>
					</view>
					<view>
						<uni-easyinput type="textarea" v-model="textValue"></uni-easyinput>
					</view>
					<view class="uni-ma-5">
						<uni-data-checkbox v-model="checkBoxValue" :multiple="false"
							:localdata="checkboxData"></uni-data-checkbox>
					</view>
					<view class="mydialog uni-ma-5">
						<u-button type="primary" text="确认" customStyle="width: 200rpx" size="small"
							@click="doSave"></u-button>
						<u-button type="warning" text="关闭" customStyle="width: 200rpx" size="small"
							@click="showDialog = !showDialog"></u-button>
					</view>
				</uni-card>
			</view>
		</u-popup>
	</view>
	<view>
		<u-popup ref="mypopup2" mode="center" :show="showDialog2" :safeAreaInsetBottom="false">
			<view class="u-popup-slot">
				<view class="mycss-flex-end">
					<u-icon class="uni-ml-5" name="close" size="25" color="#f56c6c"
						@click="showDialog2 = !showDialog2"></u-icon>
				</view>
				<uni-card>
					<view>
						<view class="mycss-flex-start">
							<view class="my-title">
								到期提醒
							</view>
							<view>
								<BiaofunDatetimePicker ref="tsRef" fields="day" :defaultValue="tsValue"
									@change="changTs">
								</BiaofunDatetimePicker>
							</view>
						</view>
						<view class="mycss-flex-start">
							<view class="my-title">
								提&#x3000;&#x3000;示
							</view>
							<view>
								<text style="color: red;font-size: 20rpx;">
									登录系统后，若备忘录事项到期，每十分钟将提醒一次，直至备忘录该事项点击了完成
								</text>
							</view>
						</view>
					</view>
					<view class="mydialog uni-ma-5">
						<u-button type="primary" text="确认" customStyle="width: 200rpx" size="small"
							@click="doSaveTsTime(item)"></u-button>
						<u-button type="warning" text="关闭" customStyle="width: 200rpx" size="small"
							@click="showDialog2 = !showDialog2"></u-button>
					</view>
				</uni-card>
			</view>
		</u-popup>
	</view>
	<view>
		<u-popup ref="mypopup3" mode="center" :show="showDialog3" :safeAreaInsetBottom="false">
			<view class="u-popup-slot">
				<view class="mycss-flex-end">
					<u-icon class="uni-ml-5" name="close" size="25" color="#f56c6c"
						@click="showDialog3 = !showDialog3"></u-icon>
				</view>
				<view style="width:95vw;">
					<ProcessBar ref="notepadProcess" :day="50" :showTop="false" :list="notepadProcessList"></ProcessBar>
				</view>
				<uni-transition v-if="notnull" mode-class="slide-right" :duration="1000" :show="true">
					<u-alert description="步骤内容不能为空" type="error"></u-alert>
				</uni-transition>
				<view class="mydialog uni-ma-5">
					<u-button type="primary" text="确认" customStyle="width: 200rpx" size="small"
						@click="doSaveProcessbar"></u-button>
					<u-button type="warning" text="关闭" customStyle="width: 200rpx" size="small"
						@click="showDialog3 = !showDialog3"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
	<u-toast ref="myuToast"></u-toast>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		inject
	} from "vue"
	import MyDialog from "@/pages/components/my-dialog/my-dialog.vue"
	import ProcessBar from "@/components/process-bar/process-bar.vue"
	import notepadData from "./notepad_data.js";
	import BiaofunDatetimePicker from "@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import utils from "@/utils/utils.js"
	import {
		formatDate
	} from "@/utils/dateUtil.js";
	const http = inject("$http");
	const radio1 = ref(-1);
	const scheDay = ref("");
	const ww = ref(2);
	const range = ref([]);
	const tsYear = ref("输入年份")
	const myuToast = ref();
	const tsMonth = ref("输入年月")
	const searchContent = ref("")
	const showCls = ref(false)
	const startYear = ref("")
	const startMonth = ref("")
	const yearRef = ref();
	const monthRef = ref();
	const showDialog = ref(false)
	const showDialog2 = ref(false)
	const showDialog3 = ref(false)
	let clickItem = null;
	const textValue = ref("")
	const checkBoxValue = ref(0)
	const tsValue = ref("请输入年月日");
	const startSche = ref(formatDate(new Date(), "yyyy-MM-dd"));
	const scheRef = ref();
	const notepadProcessList = reactive([]);
	const notepadProcess = ref();
	const notnull = ref(false);
	const checkboxData = reactive([{
		value: 1,
		text: "重要"
	}, {
		value: 0,
		text: "不重要"
	}]);
	const tableData = reactive([])
	const mypopup = ref();
	const params = {
		status: 0,
		page: 1,
		size: 10
	}
	//日历的选择项目
	const selected = [];

	onMounted(() => {
		console.log(yearRef.value)
		console.log(monthRef.value)
		console.log(mypopup.value)
		console.log(myuToast.value)
		console.log(scheRef.value)
		console.log(notepadProcess.value)
	})
	onLoad(() => {
		findData();
	})
	//变化日程书写时间
	function changeSche(e) {
		console.log(e)
		let y = e.YYYY;
		let m = e.M < 10 ? ("0" + e.M) : e.M;
		scheDay.value = y + "-" + m;
	}

	function openNote() {
		clickItem = {
			createTime: scheDay.value
		}
		showDialog.value = true;
	}

	function showTimeCols() {
		showCls.value = !showCls.value;
	}

	function reset() {
		startYear.value = ""
		startMonth.value = ""
		yearRef.value.reset();
		monthRef.value.reset();
		for (var key in params) {
			if (!(key == "status" || key == "page" || key == "size")) {
				delete params[key];
			}
		}
		findData();
	}
	//年变化
	function changeYear(e) {
		console.log(e)
		params.searchTime = e.YYYY;
		monthRef.value.reset();
		findData();
	}
	//月变化
	function changeMonth(e) {
		console.log(e)
		yearRef.value.reset();
		let y = e.YYYY;
		let m = e.M < 10 ? ("0" + e.M) : e.M;
		params.searchTime = y + "-" + m;
		findData();
	}

	function chargeW(e) {
		console.log(e)
	}
	//对话框关闭
	function closeDialog() {
		mypopup.value.close();
	}
	//保存方法
	function doSave() {
		if (textValue.value == "") {
			notnull.value = true;
			setTimeout(() => {
				notnull.value = false;
			}, 3000)
			return;
		}
		http.post("/note/edit", {
			content: textValue.value,
			createTimeStartTime: clickItem.createTime.substring(0, 10),
			importantFlag: checkBoxValue.value,
			id: clickItem.id
		}).then((res) => {
			if (res && res.data && res.data.code == 1) {
				showDialog.value = false;
				findData();
			}
		}).catch((re) => {
			console.log(re);
		});
	}
	//所有日程
	function allSchedu() {
		for (var key in params) {
			if (!(key == "status" || key == "page" || key == "size")) {
				delete params[key];
			}
		}
		findData();
	}
	//查询方法
	function doSearch() {
		params.status = 0;
		params.remark = searchContent.value;
		findData();
	}
	//日期选择改变
	function dateChange(e3) {
		let s = null;
		let e = null;
		delete params.startDate;
		delete params.endDate;
		if (e3.length > 0) {
			s = e3[0]
			e = e3[1]
			params.startDate = s;
			params.endDate = e;
		}
		findData();
	}

	function dateClear() {
		console.log("dateClear")
		range.value.splice(0, range.value.length)
	}
	//查询状态改变
	function doStatusChange() {
		console.log("--------------------")
		params.status = radio1.value;;
		if (radio1.value == -1) {
			delete params.status;
		} else {
			params.status = radio1.value;
		}
		findData();
	}

	function findData() {
		http.post("/note/table", params).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.splice(0, tableData.length);
				tableData.push(...res.data.rows);
				let nlist = [];
				tableData.forEach((item) => {
					let v = {};
					v.date = item.createTime.substring(0, 10);
					v.info = "有记录";
					nlist = selected.map((item2) => {
						if (item2.date == v.date) {
							return item2;
						}
					})
					if (nlist.length == 0) {
						selected.push(v);
					}
				})
			}
		}).catch((re) => {
			console.log(re);
		});
	}
	//详情
	function detail(item) {
		clickItem = item;
		textValue.value = item.content;
		checkBoxValue.value = item.importantFlag;
		showDialog.value = true;
	}
	//删除
	function del(item) {
		utils.showConfirm("确认要删除吗?", () => {
			http.post("/note/dele", {
				id: item.id
			}).then((res) => {
				if (res && res.data && res.data.code == 1) {
					findData()
				}
			}).catch((re) => {
				console.log(re);
			});
		})
	}
	//完成
	function complete(item) {
		http.post("/note/complete", {
			id: item.id
		}).then((res) => {
			if (res && res.data && res.data.code == 1) {
				findData()
			}
		}).catch((re) => {
			console.log(re);
		});
	}
	//打开设置对话框
	function alertSet(item) {
		showDialog2.value = true;
		clickItem = item;
		if (item.remindDate) {
			tsValue.value = item.remindDate
		} else {
			tsValue.value = formatDate(new Date(), "yyyy-MM-dd");
		}
	}
	//提示时间设置
	function changTs(e) {
		console.log(e);
	}

	function doSaveTsTime(item) {
		http.post("/note/remind", {
			id: clickItem.id,
			remindDate: tsValue.value
		}).then((res) => {
			if (res && res.data && res.data.code == 1) {
				findData()
				showDialog2.value = false;
			}
		}).catch((re) => {
			console.log(re);
		});
	}
	//日历点击
	function calendarChange(e) {
		let m = e.month;
		let d = e.date < 10 ? "0" + e.date : e.date;
		params.searchTime = e.year + "-" + m + "-" + d
		http.post("/note/table", params).then((res) => {
			if (res && res.data && res.data.code == 1) {
				findData()
			}
		}).catch((re) => {
			console.log(re);
		});
	}

	function openProcess(item) {
		showDialog3.value = true;
		clickItem = item;
		notepadProcessList.splice(0, notepadProcessList.length);
		http.post("/note/wkQuery", {
			id: item.id
		}).then((res) => {
			if (res && res.data && res.data.code == 1) {
				notepadProcessList.push(...res.data.data.subWk);
				console.log(notepadProcessList)
			}
		}).catch((re) => {
			console.log(re);
		});
	}
	//保存工序
	function doSaveProcessbar() {
		let list = notepadProcess.value.processHandler().arr;
		let v = {};
		v.id = clickItem.id;
		v.subWk = list;
		console.log(v);
		http.post("/note/wkEdit", v, "json").then((res) => {
			if (res && res.data && res.data.code == 1) {
				showDialog3.value = false;
				findData()
			}
		}).catch((re) => {
			console.log(re);
		});
	}
</script>


<style scoped>
	.white-background-color {
		background-color: #FFFFFF;
	}

	.mybottom {
		position: absolute;
		bottom: 0;
	}

	.myautoline {
		height: 100%;
		width: 100%;
		word-break: break-all
	}

	.mygrid {
		position: relative;
		background-color: #fff;
		height: 100%
	}

	.mydialog {
		width: 80vw;
		display: flex;
		justify-content: space-between;
	}

	.mytop {
		margin-top: 80rpx;
	}

	.my-title {
		background-color: #e8e8e8;
		width: 100px;
		white-space: nowrap;
	}
</style>